<template>
	<view class="content">
		<u-navbar bgColor="#F5F9FC" :placeholder="true" :border="true" height="48px">
			<view slot="left" class="navbar-left">
				<navigator class="back-button">
					<view class="nav-back-content">
						<view class="nav-title">报税</view>
					</view>
				</navigator>
			</view>
		</u-navbar>

		<!-- 年份和季度选择器 -->
		<view class="filter-container">
			<view class="filter-item" @click="showYearPicker = true">
				<u-icon name="calendar" size="16" color="#4188EF"></u-icon>
				<text>{{ selectedYear }}年</text>
				<u-icon name="arrow-down" size="14"></u-icon>
			</view>
			<view class="filter-item" @click="showQuarterPicker = true">
				<u-icon name="calendar" size="16" color="#4188EF"></u-icon>
				<text>第{{ selectedQuarter }}季度</text>
				<u-icon name="arrow-down" size="14"></u-icon>
			</view>
		</view>

		<!-- 月份选择器 -->
		<scroll-view class="month" scroll-x="true" :scroll-left="scrollInto" :scroll-with-animation="false">
			<view class="month-item" :class="index == selectId ? 'select-mon' : ''" v-for="(item,index) in monTaxList"
				:key="index" @click="selectMon(index)">
				<view>{{item.title}}</view>
			</view>
		</scroll-view>

		<!-- 税种列表 -->
		<view class="tax-container">
			<view class="tax-box" v-for="(item,index) in filteredTaxList" :key="index" v-if="isBinding">
				<view class="tax-header">
					<view class="tax-title">
						<view class="img-bg" :class="item.type">
							<image :src="getTaxIcon(item.type)"></image>
						</view>
						<text class="tax-name">{{item.title}}</text>
						<view class="tax-type-tag">{{item.feeTypeValue}}</view>
					</view>
					<view :class="item.isReport ? 'status-reported' : 'status-pending'">
						{{item.isReport ? '已申报' : '待申报'}}
					</view>
				</view>

				<!-- 税费信息显示 - 无论是否申报都显示 -->
				<view class="tax-details">
					<view class="tax-amount">
						<text class="label">应纳税额：</text>
						<text class="value">¥{{item.taxAmount || '0.00'}}</text>
					</view>
					<view class="tax-fee">
						<text class="label">应缴费用：</text>
						<text class="value">¥{{item.taxFee || '0.00'}}</text>
					</view>
					<view class="statistics-time">
						<text class="label">统计时间：</text>
						<text class="value">{{item.statisticsTime || getDefaultStatisticsTime()}}</text>
					</view>
					<view class="report-time" v-if="item.isReport">
						<text class="label">申报时间：</text>
						<text class="value">{{item.reportTime || getDefaultReportTime()}}</text>
					</view>
				</view>

				<view class="tax-actions">
					<view class="action-btn preview-btn" @click="previewFile(item.url)"
						:class="!item.isReport ? 'disabled' : ''">
						<u-icon name="eye" size="14"></u-icon>
						<text>查看结果</text>
					</view>
					<view class="action-btn download-btn" @click="downloadReport(item)"
						:class="!item.isReport ? 'disabled' : ''">
						<u-icon name="download" size="14"></u-icon>
						<text>报表下载</text>
					</view>
					<view class="action-btn declare-btn" @click="declareTax(item)" v-if="!item.isReport">
						<u-icon name="edit-pen" size="14"></u-icon>
						<text>立即申报</text>
					</view>
				</view>
			</view>
		</view>

		<view v-if="!isBinding" class="none-box">
			<view class="img-box">
				<image src="../../static/images/none.png"></image>
			</view>
			<view class="title">无公司信息，请先绑定公司</view>
			<view class="btn" @click="toBinding()">
				<view></view>
				<view>去绑定</view>
				<image src="../../static/images/arrow-right-white.png"></image>
			</view>
		</view>

		<view v-if="isBinding && filteredTaxList.length === 0" class="no-data">
			<image src="../../static/images/arrow-right-white.png" class="no-data-img"></image>
			<text class="no-data-text">当前筛选条件下无申报数据</text>
		</view>

		<!-- 年份选择器 -->
		<u-picker :show="showYearPicker" :columns="[yearColumns]" @confirm="confirmYear"
			@cancel="showYearPicker = false"></u-picker>

		<!-- 季度选择器 -->
		<u-picker :show="showQuarterPicker" :columns="[quarterColumns]" @confirm="confirmQuarter"
			@cancel="showQuarterPicker = false"></u-picker>
	</view>
</template>

<script>
	import {
		getDeclarationApi,
		currentCompanyApi,
		typeListApi
	} from "@/api/auth.js"
	export default {
		data() {
			const currentYear = new Date().getFullYear()
			const currentMonth = new Date().getMonth() + 1
			const currentQuarter = Math.ceil(currentMonth / 3)

			return {
				monTaxList: [],
				selectId: new Date().getMonth(),
				taxList: [],
				scrollInto: '',
				form: {
					customerId: '',
					year: currentYear,
					month: currentMonth,
					quarter: currentQuarter
				},
				// 筛选状态
				selectedYear: currentYear,
				selectedQuarter: currentQuarter,
				showYearPicker: false,
				showQuarterPicker: false,
				yearColumns: [],
				quarterColumns: [],
				autoScroll: true, // 控制是否自动滚动

				companyInfo: {},
				// 税种配置
				taxTypeList: {
					communityReportUrl: '社保',
					accumulationReportUrl: '公积金',
				},
				electricityTax: {
					personageReportUrl: '个人所得税',
					qysdsReportUrl: '企业所得税',
					zzsReportUrl: '增值税',
					yhsReportUrl: '印花税',
					ghjfReportUrl: '工会经费',
					slfReportUrl: '水利费',
					cjrReportUrl: '残疾人就业保障金',
				},
				// 税种数据
				eletricityList: [{
						feeTypeName: "增值税",
						urlName: "zzsReportUrl",
						taxAmount: "5000.00",
						taxFee: "300.00",
						feeTypeValue: "月报"
					},
					{
						feeTypeName: "个人所得税",
						urlName: "personageReportUrl",
						taxAmount: "8000.00",
						taxFee: "1200.00",
						feeTypeValue: "月报"
					},
					{
						feeTypeName: "企业所得税",
						urlName: "qysdsReportUrl",
						taxAmount: "15000.00",
						taxFee: "2250.00",
						feeTypeValue: "季报"
					},
					{
						feeTypeName: "印花税",
						urlName: "yhsReportUrl",
						taxAmount: "1000.00",
						taxFee: "50.00",
						feeTypeValue: "月报"
					},
					{
						feeTypeName: "工会经费",
						urlName: "ghjfReportUrl",
						taxAmount: "2000.00",
						taxFee: "40.00",
						feeTypeValue: "月报"
					},
					{
						feeTypeName: "水利费",
						urlName: "slfReportUrl",
						taxAmount: "1500.00",
						taxFee: "30.00",
						feeTypeValue: "月报"
					},
					{
						feeTypeName: "残疾人就业保障金",
						urlName: "cjrReportUrl",
						taxAmount: "3000.00",
						taxFee: "60.00",
						feeTypeValue: "年报"
					},
					{
						feeTypeName: "社保",
						urlName: "communityReportUrl",
						taxAmount: "8000.00",
						taxFee: "640.00",
						feeTypeValue: "月报"
					},
					{
						feeTypeName: "公积金",
						urlName: "accumulationReportUrl",
						taxAmount: "6000.00",
						taxFee: "480.00",
						feeTypeValue: "月报"
					}
				],
				electricityTaxList: [],
				typeTaxList: [],
				filteredTaxList: [], // 筛选后的列表
				isBinding: false,
				declareDict: {
					0: '无需申报',
					1: '月报',
					2: '季报',
					3: '年报'
				},
				conInfo: {},
				useMockData: false
			}
		},
		computed: {
			// 根据筛选条件过滤税种
			getFilteredTaxList() {
				if (!this.typeTaxList.length) return []

				const currentMonth = this.form.month
				const currentQuarter = this.selectedQuarter
				const currentYear = this.selectedYear

				return this.typeTaxList.filter(item => {
					const feeType = item.feeTypeValue

					// 月报：每月都显示
					if (feeType === '月报') {
						return true
					}

					// 季报：只在对应季度的月份显示
					if (feeType === '季报') {
						const quarterMonths = {
							1: [1, 2, 3], // 第1季度：1,2,3月
							2: [4, 5, 6], // 第2季度：4,5,6月
							3: [7, 8, 9], // 第3季度：7,8,9月
							4: [10, 11, 12] // 第4季度：10,11,12月
						}
						return quarterMonths[currentQuarter]?.includes(currentMonth) || false
					}

					// 年报：只在1月份显示（通常年报在年初申报）
					if (feeType === '年报') {
						return currentMonth === 1
					}

					return true
				})
			}
		},
		watch: {
			// 监听筛选条件变化
			selectedYear: {
				handler() {
					this.updateFilteredList()
				},
				immediate: true
			},
			selectedQuarter: {
				handler() {
					this.updateFilteredList()
				},
				immediate: true
			},
			selectedMonth: {
				handler() {
					this.updateFilteredList()
				},
				immediate: true
			},
			typeTaxList: {
				handler() {
					this.updateFilteredList()
				},
				immediate: true
			}
		},
		beforeMount() {
			this.getMonth()
			this.initPickerData()
		},
		onShow() {
			this.currentCompany()
			this.companyInfo = uni.getStorageSync('companyInfo')
			this.form.customerId = this.companyInfo.id
		},
		mounted() {},
		methods: {
			// 获取税种图标
			getTaxIcon(type) {
				const icons = {
					'owner': '../../static/images/owner.png',
					'company': '../../static/images/company.png',
					'up': '../../static/images/up.png'
				}
				return icons[type] || '../../static/images/up.png'
			},

			// 更新筛选后的列表
			updateFilteredList() {
				this.filteredTaxList = this.getFilteredTaxList
			},

			// 初始化选择器数据
			initPickerData() {
				// 年份选择器：当前年份到1949年（倒序）
				const currentYear = new Date().getFullYear()
				this.yearColumns = []
				for (let year = currentYear; year >= 1949; year--) {
					this.yearColumns.push(year + '年')
				}

				// 更新季度选择器
				this.updateQuarterColumns()
			},

			// 更新季度选择器数据
			updateQuarterColumns() {
				const currentYear = new Date().getFullYear()
				const currentQuarter = Math.ceil((new Date().getMonth() + 1) / 3)

				this.quarterColumns = []
				let maxQuarter = 4

				// 如果是当前年份，只显示到当前季度
				if (this.selectedYear === currentYear) {
					maxQuarter = currentQuarter
				}

				for (let quarter = 1; quarter <= maxQuarter; quarter++) {
					this.quarterColumns.push('第' + quarter + '季度')
				}
			},

			// 年份选择确认
			confirmYear(e) {
				const yearStr = e.value[0]
				const year = parseInt(yearStr)
				this.selectedYear = year
				this.form.year = year
				this.showYearPicker = false

				// 更新季度选择器
				this.updateQuarterColumns()
				// 重置为第一季度
				this.selectedQuarter = 1
				this.form.quarter = 1
				this.form.month = 1
				this.selectId = 0
				this.autoScroll = true
				this.scrollInto = '0rpx'

				// 重新获取数据
				this.getDeclaration()
			},

			// 季度选择确认
			confirmQuarter(e) {
				const quarterStr = e.value[0]
				const quarter = parseInt(quarterStr.replace('第', '').replace('季度', ''))
				this.selectedQuarter = quarter
				this.form.quarter = quarter
				this.showQuarterPicker = false

				// 设置对应季度的第一个月份
				const quarterMonths = {
					1: 1,
					2: 4,
					3: 7,
					4: 10
				}
				this.form.month = quarterMonths[quarter] || 1
				this.selectId = this.form.month - 1
				this.autoScroll = true
				this.scrollInto = (214 * this.selectId) + 'rpx'

				// 重新获取数据
				this.getDeclaration()
			},

			// 获取默认申报时间
			getDefaultReportTime() {
				const day = Math.floor(Math.random() * 15) + 1 // 申报时间通常在月初
				return `${this.selectedYear}-${this.form.month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
			},

			// 获取默认统计时间
			getDefaultStatisticsTime() {
				const day = Math.floor(Math.random() * 28) + 1
				return `${this.selectedYear}-${this.form.month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
			},

			// 月份选择
			selectMon(id) {
				this.selectId = id
				this.form.month = (id + 1)
				this.autoScroll = false // 手动点击时不自动滚动
				this.getDeclaration()
			},

			// 立即申报
			declareTax(item) {
				uni.showModal({
					title: '立即申报',
					content: `确定要申报${item.title}吗？`,
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '申报中...'
							})

							// 模拟申报过程
							setTimeout(() => {
								uni.hideLoading()
								uni.showToast({
									title: '申报成功',
									icon: 'success'
								})

								// 更新申报状态
								item.isReport = true
								item.url = `https://example.com/${item.urlName}.pdf`
								item.reportTime = this.getDefaultReportTime()
							}, 2000)
						}
					}
				})
			},

			// 报表下载
			downloadReport(item) {
				if (!item.isReport || !item.url) {
					uni.showToast({
						title: '暂无报表可下载',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '下载中...'
				})

				uni.downloadFile({
					url: item.url,
					success: (res) => {
						uni.hideLoading()
						if (res.statusCode === 200) {
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: (saveRes) => {
									uni.showToast({
										title: '下载成功',
										icon: 'success'
									})
								},
								fail: () => {
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									})
								}
							})
						}
					},
					fail: (err) => {
						uni.hideLoading()
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						})
					}
				})
			},

			// 以下是您原来的方法
			getMonth() {
				const date = new Date()
				const month = date.getMonth() + 1
				for (let i = 1; i <= 12; i++) {
					let monTax = {
						title: i + '月',
					}
					this.monTaxList.push(monTax)
				}
				this.scrollInto = (220 * new Date().getMonth()) + 'rpx'
			},

			async currentCompany() {
				try {
					await currentCompanyApi().then(res => {
						if (res.code == 200 && res.data) {
							this.electricityTaxList = res.data.feeTypeList || []
							this.conInfo = res.data
							this.isBinding = true
							this.useMockData = false
							this.getDeclaration()
						} else {
							// 接口无数据时使用模拟数据
							this.useMockData = true
							this.isBinding = true
							this.generateMockData()
						}
					}).catch(err => {
						// 接口错误时使用模拟数据
						console.log('接口错误，使用模拟数据', err)
						this.useMockData = true
						this.isBinding = true
						this.generateMockData()
					})
				} catch (error) {
					// 异常时使用模拟数据
					console.log('异常，使用模拟数据', error)
					this.useMockData = true
					this.isBinding = true
					this.generateMockData()
				}
			},

			// 生成模拟数据
			generateMockData() {
				// 模拟公司信息
				this.conInfo = {
					reserve: 1, // 公积金申报类型
					social: 1, // 社保申报类型
					feeTypeList: this.generateMockFeeTypeList()
				}

				// 模拟税费种列表
				this.electricityTaxList = this.conInfo.feeTypeList

				this.getDeclaration()
			},

			// 生成模拟税费种数据
			generateMockFeeTypeList() {
				const feeTypes = [{
						feeTypeName: "增值税",
						feeTypeValue: "月报"
					},
					{
						feeTypeName: "个人所得税",
						feeTypeValue: "月报"
					},
					{
						feeTypeName: "企业所得税",
						feeTypeValue: "季报"
					},
					{
						feeTypeName: "印花税",
						feeTypeValue: "月报"
					},
					{
						feeTypeName: "工会经费",
						feeTypeValue: "月报"
					},
					{
						feeTypeName: "水利费",
						feeTypeValue: "月报"
					},
					{
						feeTypeName: "残疾人就业保障金",
						feeTypeValue: "年报"
					},
					{
						feeTypeName: "社保",
						feeTypeValue: "月报"
					},
					{
						feeTypeName: "公积金",
						feeTypeValue: "月报"
					}
				]

				return feeTypes.map((item, index) => ({
					...item,
					id: index + 1
				}))
			},

			// 生成模拟申报数据
			generateMockDeclarationData() {
				const currentMonth = this.form.month
				const currentQuarter = this.selectedQuarter
				const isSeason = [1, 4, 7, 10].includes(currentMonth) // 季报月份
				const isAnnual = currentMonth === 1 // 年报月份

				const mockData = {
					zzsReportUrl: isSeason ? 'https://example.com/zzs.pdf' : '',
					personageReportUrl: 'https://example.com/personage.pdf',
					qysdsReportUrl: isSeason ? 'https://example.com/qysds.pdf' : '',
					yhsReportUrl: 'https://example.com/yhs.pdf',
					ghjfReportUrl: 'https://example.com/ghjf.pdf',
					slfReportUrl: 'https://example.com/slf.pdf',
					cjrReportUrl: isAnnual ? 'https://example.com/cjr.pdf' : '',
					communityReportUrl: 'https://example.com/community.pdf',
					accumulationReportUrl: 'https://example.com/accumulation.pdf'
				}

				// 根据筛选条件智能设置申报状态
				Object.keys(mockData).forEach(key => {
					const isCurrentTax = this.shouldShowTax(key)
					if (isCurrentTax && Math.random() > 0.3) { // 符合条件的税种70%概率为已申报
						if (!mockData[key]) {
							mockData[key] = `https://example.com/${key}.pdf`
						}
					} else {
						mockData[key] = '' // 不符合条件或30%概率为未申报
					}
				})

				return mockData
			},

			// 判断当前税种是否应该显示
			shouldShowTax(urlName) {
				const taxItem = this.eletricityList.find(item => item.urlName === urlName)
				if (!taxItem) return false

				const feeType = taxItem.feeTypeValue
				const currentMonth = this.form.month
				const currentQuarter = this.selectedQuarter

				// 月报：每月都显示
				if (feeType === '月报') return true

				// 季报：只在对应季度的月份显示
				if (feeType === '季报') {
					const quarterMonths = {
						1: [1, 2, 3],
						2: [4, 5, 6],
						3: [7, 8, 9],
						4: [10, 11, 12]
					}
					return quarterMonths[currentQuarter]?.includes(currentMonth) || false
				}

				// 年报：只在1月份显示
				if (feeType === '年报') return currentMonth === 1

				return true
			},

			toBinding() {
				uni.navigateTo({
					url: '/subpackageTwo/pages/addCompany/addCompany'
				})
			},

			async getDeclaration() {
				try {
					let declarationData = null

					if (this.useMockData) {
						// 使用模拟数据
						declarationData = {
							code: 200,
							data: this.generateMockDeclarationData()
						}
					} else {
						// 使用接口数据
						declarationData = await getDeclarationApi(this.form)
					}

					// 获取处理的数据
					const dd = await this.getTaxList()

					if (declarationData.code == 200 && declarationData.data) {
						var tax = [...dd]
						tax = tax.map(item => {
							const newItem = {
								...item
							}
							const url = declarationData.data[item.urlName]
							if (url) {
								newItem.isReport = true
								newItem.url = url
								// 添加申报时间和统计时间
								newItem.reportTime = this.getDefaultReportTime()
								newItem.statisticsTime = this.getDefaultStatisticsTime()
							} else {
								newItem.isReport = false
								newItem.url = ''
								newItem.reportTime = ''
								newItem.statisticsTime = this.getDefaultStatisticsTime() // 未申报也有统计时间
							}
							return newItem
						})
						this.typeTaxList = tax
					} else {
						// 如果没有数据，使用默认的税费列表
						const dd = await this.getTaxList()
						this.typeTaxList = dd
					}
				} catch (error) {
					console.log('获取申报数据失败，使用模拟数据', error)
					// 出错时使用模拟数据
					const dd = await this.getTaxList()
					const mockData = this.generateMockDeclarationData()

					const tax = dd.map(item => {
						const newItem = {
							...item
						}
						const url = mockData[item.urlName]
						if (url) {
							newItem.isReport = true
							newItem.url = url
							newItem.reportTime = this.getDefaultReportTime()
							newItem.statisticsTime = this.getDefaultStatisticsTime()
						} else {
							newItem.isReport = false
							newItem.url = ''
							newItem.reportTime = ''
							newItem.statisticsTime = this.getDefaultStatisticsTime()
						}
						return newItem
					})

					this.typeTaxList = tax
				}
			},

			// 数据处理
			async gethandleTax() {
				try {
					// 获取税费种列表
					var typeList = []

					if (this.useMockData) {
						// 使用模拟数据
						typeList = this.electricityTaxList || []
					} else {
						// 使用接口数据
						if (!this.electricityTaxList || this.electricityTaxList.length === 0) {
							try {
								var typeLists = await typeListApi({
									pageSize: 9999,
									pageNumber: 1
								})
								typeList = typeLists.data?.data || []
							} catch (error) {
								console.log('获取税费种列表失败，使用模拟数据', error)
								typeList = this.generateMockFeeTypeList()
							}
						} else {
							typeList = this.electricityTaxList
						}
					}

					// 使用税种数据
					var list = this.eletricityList.map(e => {
						return {
							type: e.feeTypeName == '个人所得税' ? 'owner' : e.feeTypeName == '企业所得税' ? 'company' :
								'up',
							title: e.feeTypeName,
							isReport: false,
							url: '',
							urlName: e.urlName,
							taxAmount: e.taxAmount || '0.00',
							taxFee: e.taxFee || '0.00',
							reportTime: '',
							statisticsTime: this.getDefaultStatisticsTime(), // 默认统计时间
							feeTypeValue: e.feeTypeValue || '月报'
						}
					})
					return this.mergeObjectsById(typeList, list)
				} catch (error) {
					console.log('gethandleTax 错误:', error)
					// 出错时返回空数组
					return []
				}
			},

			// 合并对象
			mergeObjectsById(arr1, arr2) {
				if (!arr1 || !arr2) return []

				return arr1.map(e => {
					var obj = {}
					var arr2Obj = arr2.find(el => el.title == e.feeTypeName)
					if (arr2Obj && e.feeTypeName == arr2Obj.title) {
						obj = Object.assign(e, arr2Obj)
					} else {
						obj = e
						obj.type = 'up'
						obj.isReport = false
						obj.url = ''
						obj.urlName = ''
						obj.title = e.feeTypeName
						obj.taxAmount = '0.00'
						obj.taxFee = '0.00'
						obj.reportTime = ''
						obj.statisticsTime = this.getDefaultStatisticsTime()
						obj.feeTypeValue = e.feeTypeValue || '月报'
					}
					return obj
				})
			},

			async getTaxList() {
				try {
					this.taxList = []
					// 公积金 reserve   社保 social
					// 获取单位信息
					var {
						reserve,
						social
					} = this.conInfo || {
						reserve: 1,
						social: 1
					}

					const arr = Object.entries(this.taxTypeList);
					arr.forEach(item => {
						const taxItem = {
							type: 'up',
							title: item[1],
							feeTypeValue: '',
							isReport: false,
							url: '',
							urlName: item[0],
							taxAmount: '0.00',
							taxFee: '0.00',
							reportTime: '',
							statisticsTime: this.getDefaultStatisticsTime()
						}
						if (taxItem.title == '社保') {
							taxItem.feeTypeValue = this.declareDict[social] || '月报'
						}
						if (taxItem.title == '公积金') {
							taxItem.feeTypeValue = this.declareDict[reserve] || '月报'
						}

						this.taxList.push(taxItem)
					})
					// 电税
					return await this.gethandleTax()
				} catch (error) {
					console.log('getTaxList 错误:', error)
					return []
				}
			},

			previewFile(file) {
				if (!file) {
					uni.showToast({
						title: '暂无申报文件',
						icon: 'none'
					})
					return
				}

				if (file) {
					const index = file.lastIndexOf(".");
					let fileType = ''
					if (index !== -1) {
						fileType = file.substr(index + 1).toLowerCase();
					}
					if (fileType == 'doc') {
						fileType = 'docx'
					}
					if (fileType == 'png' || fileType == 'jpg' || fileType == 'jpeg') {
						uni.previewImage({
							urls: [file],
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {

								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
					} else {
						uni.downloadFile({
							url: file,
							success: (res) => {
								if (res.statusCode === 200) {
									let tempFile = res.tempFilePath;
									uni.getFileSystemManager().saveFile({
										tempFilePath: tempFile,
										success(res) {
											uni.openDocument({
												filePath: res.savedFilePath,
												fileType: fileType,
												showMenu: true,
												success: (res) => {
													uni.hideLoading()
												},
												fail: (e) => {
													uni.showToast({
														title: '打开失败',
														icon: "error"
													})
												}
											})

										}
									})
								}
							},
							fail: (e) => {
								uni.showToast({
									title: '文件下载失败',
									icon: "error",
								})
							}
						});
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.navbar-left {
			.nav-back-content {
				display: flex;
				align-items: center;

				.nav-title {
					font-size: 34rpx;
					font-weight: bold;
					color: #1e88e5;
					margin-left: 16rpx;
				}
			}
		}

		.navigate-title {
			color: #55aaff;
		}

		/* 筛选容器 */
		.filter-container {
			padding: 20rpx 32rpx;
			display: flex;
			justify-content: space-around;
			border-bottom: 1px solid #eee;

			.filter-item {
				display: flex;
				align-items: center;
				padding: 16rpx 32rpx;
				background: #fff;
				border-radius: 12rpx;
				font-size: 28rpx;
				color: #666;
				border: 2rpx solid #e0e0e0;
				cursor: pointer;

				u-icon:first-child {
					margin-right: 8rpx;
				}

				u-icon:last-child {
					margin-left: 8rpx;
				}
			}
		}

		.month {
			width: 100%;
			white-space: nowrap;
			margin: 54rpx 0rpx;
			padding: 0 32rpx;
			box-sizing: border-box;

			.month-item {
				width: 190rpx;
				height: 50rpx;
				text-align: center;
				color: rgba(65, 136, 239, 1);
				font-size: 30rpx;
				border-radius: 16rpx;
				background: rgba(222, 235, 255, 1);
				box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.06);
				display: inline-block;
				margin-right: 24rpx;
				padding: 14rpx 0rpx;
				flex-shrink: 0;

				&:first-child {
					margin-left: 0;
				}

				&:last-child {
					margin-right: 0;
				}
			}

			.select-mon {
				width: 190rpx;
				height: 50rpx;
				text-align: center;
				color: rgba(65, 136, 239, 1);
				font-size: 30rpx;
				border-radius: 16rpx;
				background: rgba(255, 255, 255, 1);
				border: 2rpx solid rgba(65, 136, 239, 1);
				box-shadow: 0px 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.06);
				display: inline-block;
				margin-right: 24rpx;
				padding: 14rpx 0rpx;
				flex-shrink: 0;
			}
		}

		/* 税种容器 */
		.tax-container {
			padding: 0 32rpx;

			.tax-box {
				// width: 100%;
				height: auto;
				border-radius: 16rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
				padding: 32rpx;
				margin-bottom: 24rpx;

				.tax-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 24rpx;

					.tax-title {
						display: flex;
						align-items: center;

						.img-bg {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 20rpx;

							&.owner {
								background: rgba(233, 244, 255, 1);
							}

							&.company {
								background: rgba(255, 241, 220, 1);
							}

							&.up {
								background: rgba(233, 236, 255, 1);
							}

							image {
								width: 40rpx;
								height: 40rpx;
							}
						}

						.tax-name {
							font-size: 32rpx;
							font-weight: bold;
							color: #333;
							margin-right: 16rpx;
						}

						.tax-type-tag {
							padding: 8rpx 16rpx;
							background: #e6f7ff;
							color: #1890ff;
							border-radius: 8rpx;
							font-size: 22rpx;
						}
					}

					.status-reported,
					.status-pending {
						padding: 12rpx 24rpx;
						border-radius: 20rpx;
						font-size: 24rpx;
						font-weight: bold;
					}

					.status-reported {
						background: #f6ffed;
						color: #52c41a;
					}

					.status-pending {
						background: #fff7e6;
						color: #fa8c16;
					}
				}

				.tax-details {
					margin-bottom: 24rpx;

					.tax-amount,
					.tax-fee,
					.report-time,
					.statistics-time {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 12rpx 0;
						border-bottom: 1rpx solid #f0f0f0;

						&:last-child {
							border-bottom: none;
						}

						.label {
							font-size: 28rpx;
							color: #666;
						}

						.value {
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
						}
					}

					.tax-amount .value,
					.tax-fee .value {
						color: #ff4d4f;
					}
				}

				.tax-actions {
					display: flex;
					justify-content: space-between;
					gap: 16rpx;

					.action-btn {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 16rpx 24rpx;
						border-radius: 12rpx;
						font-size: 26rpx;
						font-weight: bold;
						transition: all 0.3s;
						flex: 1;


						u-icon {
							margin-right: 8rpx;
						}

						&.preview-btn {
							background: #1890ff;
							color: #fff;

							&.disabled {
								/* background: #d9d9d9;
								color: #999; */
								border: 2rpx solid rgba(65, 136, 239, 1);
								background: rgba(233, 244, 255, 1);
								font-size: 20rpx;
								color: rgba(65, 136, 239, 1);
							}
						}

						&.download-btn {
							background: #52c41a;
							color: #fff;

							&.disabled {
								/* background: #d9d9d9;
								color: #999; */
								border: 2rpx solid rgba(65, 136, 239, 1);
								background: rgba(233, 244, 255, 1);
								font-size: 20rpx;
								color: rgba(65, 136, 239, 1);
							}
						}

						&.declare-btn {
							background: #e9f4ff;
							color: #4188ef;
						}
					}
				}
			}
		}

		.none-box {
			margin-top: 250rpx;
			padding: 0 32rpx;

			.img-box {
				display: flex;
				justify-content: center;

				image {
					width: 334rpx;
					height: 334rpx;
					margin: 0 auto 0 auto;
				}
			}

			.title {
				margin-top: 40rpx;
				font-size: 30rpx;
				color: rgba(156, 156, 156, 1);
				font-weight: 500;
				text-align: center;
			}

			.btn {
				width: 186rpx;
				height: 80rpx;
				border-radius: 44rpx;
				background: rgba(65, 136, 239, 1);
				display: flex;
				align-items: center;
				margin: 44rpx auto 0 auto;
				font-size: 30rpx;
				letter-spacing: 4rpx;
				color: #fff;
				justify-content: space-between;
				padding: 0 40rpx;

				image {
					width: 14rpx;
					height: 24rpx;
				}
			}
		}

		.no-data {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 100rpx 32rpx;

			.no-data-img {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 40rpx;
			}

			.no-data-text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
</style>